<template>
   <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    <el-breadcrumb-item>用户列表</el-breadcrumb-item>
  </el-breadcrumb>

  <!--卡片-->
  <el-card class="box-card">
    <el-row :gutter="20">
        <el-col :span="7">
            <el-input placeholder="请输入内容" v-model="query.query" clearable @clear="getuser">
                <template #append>
                   <el-button :icon="Search" @click="getuser"></el-button>
                </template>
            </el-input>
        </el-col>
        <el-col :span="3">
            <el-button type="primary"   @click="dialogVisible = true">添加用户</el-button>
        </el-col>
    </el-row>
    <el-table :data="userData.list" stripe style="width: 100%">
      <el-table-column type="index">
        </el-table-column>
        <el-table-column label="姓名" prop="username">
        </el-table-column>
         <el-table-column label="电话" prop="mobile">
        </el-table-column>
         <el-table-column label="创建时间" prop="create_time">
        </el-table-column>
         <el-table-column label="角色" prop="role_name">
        </el-table-column>
         <el-table-column label="邮箱" prop="email">
        </el-table-column>
         <el-table-column label="状态" prop="mg_state">
              <template v-slot:default="slotProps"> 
                <el-switch
                  v-model="slotProps.row.mg_state"
                  class="ml-2"
                  @change="changestate(slotProps.row)"
                /> 
            </template>
        </el-table-column>
         <el-table-column label="操作">
             <template v-slot:default="slotProps"> 
                   <el-button type="primary" :icon="Edit" circle size="small"></el-button>
                   <el-button type="danger" :icon="Delete" size="small" circle ></el-button>

                   <el-tooltip
                      class="box-item"
                      effect="dark"
                      content="分配角色"
                      placement="top-start"
                    >
                      <el-button type="warning" :icon="Setting" size="small" circle ></el-button>
                   </el-tooltip>

             </template>
        </el-table-column>
    </el-table>


    <el-pagination
      v-model:currentPage="query.pagenum"
      v-model:page-size="query.pagesize"
      :page-sizes="[1, 2, 5, 10]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>


  </el-card>

  <el-dialog
    v-model="dialogVisible"
    title="提示"
    width="30%"
  > 

  <el-form ref="formRef" :model="form" label-width="70px">
    <el-form-item label="用户名">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
  </el-form>
  <el-form ref="formRef" :model="form" label-width="70px">
    <el-form-item label="密码">
      <el-input v-model="form.password"></el-input>
    </el-form-item>
  </el-form>
  <el-form ref="formRef" :model="form" label-width="70px">
    <el-form-item label="邮箱">
      <el-input v-model="form.email"></el-input>
    </el-form-item>
  </el-form>
  <el-form ref="formRef" :model="form" label-width="70px">
    <el-form-item label="手机">
      <el-input v-model="form.mobile"></el-input>
    </el-form-item>
  </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary"  @click="adduser">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import {
  Search,
  Edit,
  Delete,
  Setting
} from '@element-plus/icons-vue'
import { reactive } from 'vue'
import {get, put,post} from '../../js/'
import { onMounted } from "@vue/runtime-core"
import { ref } from 'vue'

function adduser() {
  post('users',form).then((res) => {
      userData.list = res.data.data.users;
      if(res.data.meta.status !== 201){
            $message.error('添加用户失败')
      }
      $message.error('添加用户成功')
      dialogVisible.value == false

  })
}


const dialogVisible = ref(false)

const form = reactive({
  username: '',
  password: '',
  email: '',
  mobile: ''
})

const onSubmit = () => {
  console.log('submit!')
}

let userData = reactive({
    list: []
})



let query = reactive({
      query: '',
      pagenum: 1,
      pagesize: 2
})

function getuser() {
  get('users',{params: query}).then((res) => {
      userData.list = res.data.data.users;
  })
}

onMounted(() => {
    getuser()
})

function handleSizeChange(newsize){
    query.pagesize = newsize
    getuser()
}

function handleCurrentChange(newpage){
    query.pagenum = newpage
    getuser()
}

function changestate(userinfo){
    put('users/'+userinfo.id+'/state/'+userinfo.mg_state).then((res) => {
  })
}

</script>
<style lang="less" scoped>
    
</style>